<template>
    <div id="app">
        <div class="context" ref="context">
            <div class="queryBox" ref="queryBox">
                <el-form :model="formQueryCondition"
                         ref="form" size="mini">
                         <el-row>
                             <!-- 资产编号 -->
                             <el-col :span="5">
                                 <el-form-item :label="$t('CDNRelease.assetCode')"
                                :label-width="queryformLabelWidth">
                                    <el-input v-model.trim="formQueryCondition.assetCode.val" class="queryItemStyle" clearable
                                            :placeholder="$t('CDNRelease.placeholderAssetCode')"></el-input>
                                </el-form-item>
                             </el-col>
                             <!-- 剧集编号 -->
                             <el-col :span="5" :offset="1">
                                 <el-form-item :label="$t('CDNRelease.subAssetCode')"
                                :label-width="queryformLabelWidth">
                                    <el-input v-model.trim="formQueryCondition.subAssetCode.val" class="queryItemStyle" clearable
                                            :placeholder="$t('CDNRelease.placeholderSubAssetCode')"></el-input>
                                </el-form-item>
                             </el-col>
                             <!-- 分发状态 -->
                             <el-col :span="5" :offset="1">
                                 <el-form-item :label="$t('CDNRelease.operatingState')" :label-width="queryformLabelWidth" >
                                    <el-select v-model="formQueryCondition.operatingState.val" class="queryItemStyle" >
                                        <el-option :label="$t('CDNRelease.all')" value=""></el-option>
                                        <el-option :value="drug.valueCode" :key="drug.valueCode" :label="drug.valueText"
                                            v-for="drug in distribute"></el-option>
                                    </el-select>
                                </el-form-item>
                             </el-col>
                             <!-- 操作类型 -->
                             <el-col :span="5" :offset="1">
                                 <el-form-item :label="$t('CDNRelease.operationType')" :label-width="queryformLabelWidth">
                                    <el-select v-model="formQueryCondition.operationType.val" class="queryItemStyle">
                                        <el-option :label="$t('CDNRelease.all')" value=""></el-option>
                                        <el-option :value="drug.valueCode" :key="drug.valueCode" :label="drug.valueText"
                                            v-for="drug in type"></el-option>
                                    </el-select>
                                </el-form-item>
                             </el-col>
                         </el-row>

                    <!-- 操作状态 -->
                    <!-- <el-form-item :label="$t('CDNRelease.operatingState')" class="separeteStyle" >
                        <el-select v-model="formQueryCondition.operatingState.val" class="queryItemStyle">
                            <el-option :label="$t('CDNInquire.CDNSuccessfulDistribution')" value="CDNSuccess"></el-option>
                            <el-option :label="$t('CDNInquire.CDNInDistribution')" value="CDNSending"></el-option>
                            <el-option :label="$t('CDNInquire.requestCDNFailed')" value="CNDRequestFailed"></el-option>
                            <el-option :label="$t('CDNInquire.requestCDNSubmission')" value="CNDRequestSubmission"></el-option>
                        </el-select>
                    </el-form-item> -->
                    <!-- 按钮 -->
                    <el-row>
                        <el-col :span="24">
                            <div style="text-align:right">
                                <el-form-item>
                                    <!--  重置 -->
                                    <el-button v-permission="{menuCode: menuCode,resourceCode: 'resetBtnText'}" type="primary" @click="onReset('form')">{{ $t('btnText.resetBtnText') }}</el-button>
                                <!-- </el-form-item> -->
                                <!-- <el-form-item> -->
                                    <!-- 查询 queryBtnText -->
                                    <el-button v-permission="{menuCode: menuCode,resourceCode: 'queryBtnText'}" type="primary" @click="onQuery('queryBtnText')" icon="el-icon-search" :loading="loading">{{ $t('btnText.queryBtnText') }}</el-button>
                                </el-form-item>
                            </div>
                        </el-col>
                    </el-row>
                </el-form>
            </div>

            <div class="dataBox" ref="dataBox">
                <el-table v-if="isInit" ref="singleTable"
                            :data="tableData"
                            :height="tableHeight"
                            @sort-change="sortChange"
                            v-loading="loading" size="mini"
                            style="width: 100%;" stripe=stripe border=border>
                    <el-table-column type="index" fixed="left" :label="$t('table.xh')">
                    </el-table-column>
                    <!--操作-->
                    <el-table-column :label="$t('assetsCn.table.op')" fixed="left" min-width="120">
                        <template slot-scope="scope">
                            <!--置顶-->
                            <el-button size="gv" icon="el-icon-tickets" :loading="loading" v-if="scope.row.distribute=='队列中'" 
                             @click="priority(scope.$index, scope.row,'stick')" v-permission="{menuCode: menuCode,resourceCode: 'stick'}"
                                        >{{ $t('CDNRelease.stick') }}</el-button>
                            <el-button size="gv"
                                icon="el-icon-tickets"
                                :loading="loading"
                                @click="priority(scope.$index, scope.row,'stick')" v-if="scope.row.distribute=='正在分发' && checkDateTime(scope.row.cdnInjectionStartTime)"
                                v-permission="{menuCode: menuCode,resourceCode: 'stick'}">{{ $t('CDNRelease.sendSubBtnText') }}</el-button>
                            <!--删除-->
                            <el-button size="gv" icon="el-icon-delete" v-permission="{menuCode:menuCode , resourceCode:'deleteCdnBtnText'}"
                                        type="danger" :loading="loading" @click="deleteRow(scope.$index, scope.row,'deleteCdnBtnText')"
                                         v-if="scope.row.distribute=='队列中'" >{{ $t('CDNRelease.deleteCdnBtnText') }}</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column v-for="(item, index) in tableRows" :key="index" :prop="item.prop" :sort-by="item.prop" :min-width="(item.width && item.width>0) ? item.width : 135" :label="item.title">
                    </el-table-column>
                </el-table>
            </div>
            <div class="pageBox" ref="pageBox" >
                <el-pagination @size-change="sizeChange"
                            @current-change="currentPageChange"
                            :current-page="pager.curPage"
                            :page-sizes="pager.sizes"
                            :page-size="pager.curSize"
                            :background="true"
                            layout="total, sizes, prev, pager, next, jumper" :total="pager.total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>

import comBaseVue from '../../baseViewModel';

export default {
  mixins: [comBaseVue],
  name:'CDNRelease',
  props: {
    menuCode: String
  },
  data () {
    return {
        modelName:"com.ispr.iptv.entity.media.AddedEpisodeInjectionRecordTableEntity",
        isInit:false,
        tableHeight:100,
        distribute:[], //操作类型
        type:[], //操作目标类型
         // 排序对象
        sort: {
            key: "createdDate",
            dir: "asc"
        },
        tableRows: [
            {
                // 资产编号
                title: this.$t("CDNRelease.assetCode"),
                prop: "subAssetEntity.assetEntity.assetCode",
            },
            {
                // 资产名称
                title: this.$t("CDNRelease.assetName"),
                prop: "subAssetEntity.assetEntity.assetName",
            },
            {
                // 剧集编号
                title: this.$t("CDNRelease.subAssetCode"),
                prop: "subAssetEntity.subassetCode",
            },
            {
                // 剧集名称
                title: this.$t("CDNRelease.subAssetName"),
                prop: "subAssetEntity.subassetName",
            },
            {
                // CDN名称
                title: this.$t("CDNInquire.CDNName"),
                prop: "siteName",
            },
            {
                // 操作类型
                title: this.$t("CDNRelease.operatingState"),
                prop: "distribute",
            },
            {
                // 操作目标类型
                title: this.$t("CDNRelease.operationType"),
                prop: "action",
            },
            {
                // 创建时间
                title: this.$t("CDNRelease.createTime"),
                prop: "createdDate",
                width: 180,
            },
            {
                // 注入开始时间
                title: this.$t("CDNRelease.feedbackTime"),
                prop: "cdnInjectionStartTime",
                width: 180,
            },
            {
                // 反馈时间
                title: this.$t("CDNRelease.feedbackTime"),
                prop: "cdnInjectionEndTime",
                width: 180,
            },
        ],
        // 查询条件
        formQueryCondition: {
            assetCode: {
                key: 'subAssetEntity.assetEntity.assetCode', //资产编号
                val:'',
                op: 'LIKE',
            },
            subAssetCode: {
                key: 'subAssetEntity.subassetCode', //剧集编号
                val:'',
                op: 'LIKE',
            },
            operatingState: {
                key: 'distribute', //分发状态
                val:'',
                op: '=',
            },
            operationType2: {
                key: 'distribute', //操作类型
                val:'BeingDistributed',
                op: '=',
                group: 'operationType2'
            },
            operationType3: {
                key: 'distribute', //操作类型
                val:'InTheQueue',
                op: '=',
                group: 'operationType2'
            },
            operationType: {
                key: 'action', //操作类型
                val:'',
                op: '=',
            },
        },
    }
  },
  methods:{
    checkDateTime: function(dateTime) {
       if((new Date().getTime() - new Date(dateTime).getTime()) > (1000 * 60 * 60)){
         return true;
       }else{
         return false;
       }
    },
           // 重置
    onReset:function(){
        if (this.$refs['form']) {
            this.$refs['form'].resetFields();
        }
        this.formQueryCondition.assetCode.val = "";
        this.formQueryCondition.subAssetCode.val = "";
        this.formQueryCondition.operationType.val = "";
        this.formQueryCondition.operationTargetType.val = "";
        // this.formQueryCondition.operatingState.val = "";
    },
     // 为操作目标类型下拉框赋值
    findType: function() {
        this.findByTypeCode("10028",this.setType)
    },
     // 查询操作类型下拉框数据成功后的回调
    setType: function(isSuccess,json) {
        try{

            if (isSuccess) {
                this.type = [];
                for (var i = 0; i < json.data.length; i++) {
                    this.type.push(json.data[i]);
                }
            }
            else {
                this.$message.error(json.msg);
            }
        }
        catch(e){
            alert(e);
        }
    },
    // 为操作类型下拉框赋值
    findDistribute: function() {
        this.findByTypeCode("10018",this.setAssetType)
    },
    // 查询操作类型下拉框数据成功后的回调
    setAssetType: function(isSuccess,json) {
        try{

            if (isSuccess) {
                this.distribute = [];
                for (var i = 0; i < json.data.length; i++) {
                    if(json.data[i].valueText === '队列中' || json.data[i].valueText === '正在分发'){
                        this.distribute.push(json.data[i]);
                    }
                }
            }
            else {
                this.$message.error(json.msg);
            }
        }
        catch(e){
            alert(e);
        }
    },
    priority: function(index, row,rescode){
        // this.$message({
        //      message: this.$i18n.t("message.successTip"),//resource.message.successTip,
        //      type: 'success'
        // });
        this.currentResCode = (rescode && rescode!=='') ? rescode : '';
         var _this = this;
        this.$confirm(this.$i18n.t("CDNRelease.message.areYouSureTopThisData"),
            this.$i18n.t("message.confirmTitle"), {
            confirmButtonText: this.$i18n.t("message.yes"),
            cancelButtonText: this.$i18n.t("message.cancel"),
            type: "warning",
             callback: function (action, instance) {
                if (action == "confirm") {
                     var commandBody = {  "keyId": row.keyId, "version": row.version};
                    _this.loading = true;
                    _this.procCommand("MediaToCdnTopProc",
                        _this.modelName,
                        "N",
                         commandBody,
                         null,
                        _this.submitFormCallback);
                }

            }
        });
    },
     // 执行命令后的回调函数
        submitFormCallback: function submitFormCallback(isSuccess,json) {
            this.loading = false;
            if(isSuccess){
                this.isShowEditForm = false;
                this.$message({
                    message: this.$i18n.t("message.successTip"),//resource.message.successTip,
                    type: 'success'
                });
                this.queryTable();
            }
            else
            {
                this.$message({
                            message: json.msg,
                            type: 'warning'
                            });
            }
        },
        enterDown(){
            var g=this
            if(!g.loading){
                g.onQuery()
            }
        }
  },
  mounted: function mounted() {
        this.findType(); //操作目标类型
        this.findDistribute(); //操作类型
        this.tableHeight = document.body.clientHeight - this.$refs.queryBox.offsetHeight -  this.$refs.pageBox.offsetHeight - 120;
        this.isInit = true;
        this.onQuery();
  }
}


</script>

<style scoped>
.separeteStyle{
    margin-left: 15px;
}
</style>

